<template>
    <div class="page_con">
        <div class="search h100 flex-v-center">
            <div class="input flex-center">
                <i class="icon-search mar-r10 color-ccc"></i>
                <input 
                    v-model="keyword" 
                    class="flex-1" 
                    type="text" 
                    confirm-type="search" 
                    placeholder="关键词" 
                    @confirm="getList" 
                    placeholder-class="placeholder" >
                <i @click="clearKeyword" v-if="keyword" class="icon-close-circular"></i>
            </div>
            
            <div class="cancel mar-l20 pad-lr20 flex-center" @click="getList">
                <span class="fs26">搜索</span>
            </div>
        </div>
        <div class="map_container">
            <map 
                id="map_container" 
                class="map" 
                :scale="14"
                :markers="allMarkerts"
                :latitude="current.latitude" 
                :longitude="current.longitude" 
                @regionchange="regionchange"
                @markertap="markertap"></map>
            <div class="back_current" @click="backToCurrent">
                <image src="/static/images/current.png" mode="" />
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index" @click="actLocation(item)">
                <div class="avator">
                    <image :src="item.mapUserImg || (item.mapSex == '01' ? man : women)" mode="" />
                </div>
                <div class="info">
                    <p>{{item.mapUserName}}</p>
                    <span>{{item.mapAddress}}</span>
                    <em>{{item._distance}}</em>
                </div>
                <div class="address flex-center flex-column" @click="toNavigate(item)">
                    <uni-icons class="icon" size="24" color="#fff" type="paperplane-filled"></uni-icons>
                    <span>到这里</span>
                </div>
            </div>
        </div>

        <uni-popup ref="locationDetail" type="center">
            <div class="location_detail">
                <div class="avator">
                    <image :src="actDetail.mapUserImg || (actDetail.mapSex == '01' ? man : women) " mode="" />
                    <p>{{actDetail.mapUserName}}</p>
                </div>
                <div class="cell">
                    <div class="cell_item">
                        <p>电话：{{actDetail.mapMibile}}</p>
                        <div @click="makePhoneCall(actDetail.mapMibile)" class="btn fs24">打电话</div>
                    </div>
                    <div class="cell_item">
                        <p>位置：{{actDetail.mapAddress}}</p>
                    </div>
                    <div class="cell_item">
                        <p>口号：{{actDetail.mapRemark}}</p>
                    </div>
                </div>
                <div class="btns">
                    <div class="btn" @click="$refs.locationDetail.close()">关闭</div>
                    <div class="btn" @click="toNavigate()">去导航</div>
                </div>
            </div>
        </uni-popup>
    </div>
</template>

<script>
import currentImg from '@/static/images/current_location.png'
import man from '@/static/images/man.webp'
import women from '@/static/images/women.webp'
import { getMapUsers } from '@/request/relationship'
export default {
    data() {
        return {
            currentImg, man, women, 
            keyword: '',
            current: {
                latitude: '',
                longitude: '', 
                iconPath: currentImg, 
                title: '当前位置',
                width: 40, 
                height: 40,
                label: {
                    x: -30,
                    y: 0,
                    fontSize: 14,
                    content: '当前位置',
                    color: '#dc3b40',
                    borderColor: '#dc3b40',
                    borderWidth: 2,
                    borderRadius: 5,
                    padding: 3,
                    bgColor: '#fff'
                },          
            },
            markers: [],
            list: [],
            mapCtx: null,
            actDetail: {}
        }
    },
    computed: {
        allMarkerts() {
            return [this.current, ...this.markers]
        }
    },
    onLoad() {
        uni.getLocation({
            type: 'gcj02',
            success: e => {
                this.current.latitude = e.latitude
                this.current.longitude = e.longitude
                console.log(e);
                this.initMap()
                this.getList()
            },
            fail: err => {
                this.initMap()
                this.getList()
            }
        })
    },
    methods: {
        initMap() {
            this.mapCtx = uni.createMapContext('map_container', this)
            console.log(this.mapCtx);
        },
        clearKeyword() {
            this.keyword = ''
            this.getList()
        },
        getList() {
            getMapUsers({
                keyWord: this.keyword,
                pageIndex: 1,
                pageSize: 200,
                userLan: this.current.latitude,
                userLon: this.current.longitude
            }).then(res => {
                let list = res.data.list
                this.list = list
                this.markers = list.map((item, index) => {
                    item._distance = (+item.distance) > 500 ? (item.distance / 1000).toFixed(2) + 'km' : item.distance + 'm'
                    return {
                        id: index ,
                        latitude: item.mapLat,
                        longitude: item.mapLon, 
                        iconPath: item.mapUserImg || (item.mapSex == '01' ? this.man : this.women), 
                        title: item.mapUserName,
                        width: 40, 
                        height: 40,
                        label: {
                            x: -20,
                            y: 0,
                            fontSize: 14,
                            content: item.mapUserName,
                            color: '#dc3b40',
                            borderColor: '#dc3b40',
                            borderWidth: 2,
                            borderRadius: 5,
                            padding: 3,
                            bgColor: '#fff'
                        },
                    }
                })
                console.log(this.markers);
            })
        },
        backToCurrent() {
            this.mapCtx.moveToLocation({
                latitude: this.current.latitude,
                longitude: this.current.longitude,
                success: () => {
                    this.refreshMakers()
                }
            })
        },
        actLocation(item) {
            this.mapCtx.moveToLocation({
                latitude: item.mapLat,
                longitude: item.mapLon,
                success: () => {
                    this.refreshMakers()
                }
            })
        },
        refreshMakers() {
            let markers = JSON.parse(JSON.stringify(this.markers))
            this.markers = []
            this.$nextTick(() => {
                this.markers = markers
            })

        },
        gaode_convent_baidu(e, t){
            var n = 52.35987755982988
            , o = e
            , i = t
            , a = Math.sqrt(o * o + i * i) + 2e-5 * Math.sin(i * n)
            , r = Math.atan2(i, o) + 3e-6 * Math.cos(o * n)
            , c = a * Math.cos(r) + .0065
            , d = a * Math.sin(r) + .006
            , s = d.toFixed(6) + "," + c.toFixed(6);
            return console.log(s), s
        },
        toNavigate(e) {
            console.log(e);
            if(e) this.actDetail = e;

            let current = this.current            
            var toLat = this.actDetail.mapLat //'23.099994'; //lat 
            var toLon = this.actDetail.mapLon //'113.324520'; //lon
            let title = this.actDetail.mapUserName

            let gdUrl = "https://uri.amap.com/navigation?from=".concat(current.longitude, ",").concat(current.latitude, ",我的位置&to=").concat(toLon, ",").concat(toLat, ",").concat(title, "&callnative=1")
            let qqUlr = "https://apis.map.qq.com/uri/v1/routeplan?type=drive\n\t\t\t&from=我的位置&fromcoord=".concat(current.latitude, ",").concat(current.longitude, "\n\t\t\t&to=").concat(title, "&tocoord=").concat(toLat, ",").concat(toLon, "\n\t\t\t&policy=1&referer=RRDBZ-2RY6X-L5F4C-TWPI7-5MI62-7TF6F")
            let bdUrl = "http://api.map.baidu.com/marker?location=".concat(this.gaode_convent_baidu(toLon, toLat), "&title=").concat(title, "&content=").concat(title, "&output=html&src=webapp.baidu.openAPIdemo ")

            uni.showActionSheet({
                itemList: ["高德地图", "腾讯地图", "百度地图"],
                success: function(e) {
                    location.href = [gdUrl, qqUlr, bdUrl][e.tapIndex]
                }
            })
        },
        makePhoneCall(phoneNumber) {
            uni.makePhoneCall({ phoneNumber })
        },
        markertap(e) {
            console.log(e);
            this.actDetail = this.list[e.detail.markerId];
            this.$refs.locationDetail.open()
            console.log(this.actDetail);
        },
        regionchange(e) {
            console.log(e);
        }

    }

}
</script>

<style lang="less" scoped>
.page_con{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.search{
    background: #fff;
    padding: 0 30rpx;
    margin-bottom: 10rpx;
    height: 130rpx;
    position: sticky;
    top: 0;
    z-index: 10;
    .input{
        flex: 1;
        border-radius: 10rpx;
        height: 70rpx;
        background: #eee;
        padding-left: 20rpx;
        .icon-close-circular{
            width: 70rpx;
            height: 70rpx;
            .align(center);
        }
    }
    .cancel{
        width: 100rpx;
        height: 70rpx;
        border-radius: 10rpx;
        border: 1px solid #ddd;
    }
}
.map_container{
    width: 100%;
    // height: 60%;
    flex: 1;
    background: #ddd;
    position: relative;
    .map{
        width: 100%;
        height: 100%;
    }
    .back_current{
        position: absolute;
        bottom: 80rpx;
        right: 30rpx;
        image{
            width: 80rpx;
            height: 80rpx;
        }
    }
}
.list{
    width: 100%;
    height: 500rpx;
    overflow: auto;
    .item{
        width: 100%;
        // height: 140rpx;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        padding: 20rpx 30rpx;
        .avator{
            width: 130rpx;
            height: 130rpx;
            flex-shrink: 0;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .info{
            flex: 1;
            height: 130rpx;
            padding: 0 20rpx;
            display: flex;
            flex-direction: column;
            p{
                font-weight: bold;
            }
            span{
                flex: 1;
                font-size: 26rpx;
                color: #999;
            }
            em{
                font-size: 24rpx;
                color: #303bd8;
            }
        }
        .address{
            flex-shrink: 0;
            .icon{
                width: 60rpx;
                height: 60rpx;
                border-radius: 50%;
                line-height: 60rpx;
                background: #8099fd;
            }
            span{
                font-size: 24rpx;
            }   
        }
    }
}
.location_detail{
    width: 690rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    .avator{
        .align(center, column);
        image{
            width: 200rpx;
            height: 200rpx;
        }
        p{
            font-weight: bold;
            margin-top: 10rpx;
        }
    }
    .cell{
        padding: 30rpx 0;
        .cell_item{
            display: flex; 
            align-items: center;           
            margin-bottom: 10rpx;
            p{
                flex: 1;
                font-size: 28rpx;
                color: #666;
            }
        }
    }
    .btn{
        padding: 10rpx 20rpx;
        background: #3d7bf0;
        color: #fff;
        border-radius: 50rpx;
        .align(center);
    }
    .btns{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .btn{
            width: 220rpx;
            height: 70rpx;
            &:first-child{
                border: 1px solid #3d7bf0;
                color: #3d7bf0;
                background: #fff;
            }
        }
    }

}
</style>